<template>
  <div class="flex items-center">
    <input
      type="radio"
      class="z-input-radio"
      v-bind="{ id, name, value, checked }"
      @input="onInput"
    />
    <label
      :for="id"
      class="flex items-center cursor-pointer select-none transition-all duration-300"
    >
      <span
        class="w-4 h-4 inline-block leading-0 mr-2 rounded-full border-2 border-emerald-500 transition-all duration-300"
      />
      {{ label }}
    </label>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";

import { randId } from "../utils";

export default defineComponent({
  inheritAttrs: false,
  props: {
    name: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      required: true,
    },
    modelValue: {
      type: String,
      required: true,
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const id = "z-radio-" + randId();
    const checked = computed(() => props.value == props.modelValue);
    const onInput = (e: Event) =>
      emit("update:modelValue", (e.target as HTMLInputElement).value);
    return {
      id,
      checked,
      onInput,
    };
  },
});
</script>
<style>
.z-input-radio {
  @apply hidden overflow-hidden;
}
input.z-input-radio:checked + label > span {
  @apply bg-emerald-500;
}
input.z-input-radio:checked + label > span::after {
  @apply inline-block rounded-full border-3 h-full w-full border-white;
  content: " ";
}
</style>
